<script lang="ts" setup>
import { getUserList } from "@/api/system/user";
import TagColorConfig from "@/config/enumTagColor";
import { SexEnumDict } from "@/config/enumLabel";
import type { TableOption } from "@/types/table";
// 父组件泛型使用
// import type { ComponentExposed } from "vue-component-type-helpers";
// import { EpTable } from "@/components/EpTable";

// const tableRef = ref<ComponentExposed<typeof EpTable<Api.SystemUserRecord>>>();
type ApiRecord = Api.SystemUserRecord;

defineOptions({
  name: "BannerOperationView",
});

onMounted(() => {
  // console.log("onmounted banner");
});

const column = [
  {
    label: "登录账号",
    prop: "account",
    minWidth: 90,
    // tag: true,
    search: true,
    searchSpan: 4,
    rules: [
      {
        required: true,
        message: "请输入登录账号",
        trigger: "blur",
      },
    ],
    // span: website.tenantMode ? 12 : 24,
  },
  {
    label: "所属资方",
    minWidth: 100,
    prop: "tenantId",
    type: "tree",
    // hide: true,
    dicUrl: "/blade-system/tenant/select",
    props: {
      label: "tenantName",
      value: "tenantId",
    },
    search: true,
    searchSpan: 4,
    rules: [
      {
        required: true,
        message: "请输入所属资方",
        trigger: "click",
      },
    ],
  },
  {
    label: "密码",
    prop: "password",
    hide: true,
    // rules: [{ required: true, validator: validatePass, trigger: "blur" }],
  },
  {
    label: "确认密码",
    prop: "password2",
    hide: true,

    // rules: [{ required: true, validator: validatePass2, trigger: "blur" }],
  },
  {
    label: "用户昵称",
    prop: "name",
    minWidth: 80,
    rules: [
      {
        required: true,
        message: "请输入用户昵称",
        trigger: "blur",
      },
    ],
  },
  {
    label: "用户姓名",
    prop: "realName",
    minWidth: 80,
    search: true,
    searchSpan: 4,
    rules: [
      {
        required: true,
        message: "请输入用户姓名",
        trigger: "blur",
      },
    ],
    // formatter: ({ realName }) => {
    //   console.log("-----------", realName);
    //   return "1";
    // },
  },
  {
    label: "所属角色",
    prop: "roleId",
    multiple: true,
    type: "tree",
    tag: true,
    // dicData: [],
    dicUrl: "/blade-system/role/tree",
    minWidth: 120,
    editFormatter: (value: unknown) => {
      return (value as string).split(",");
    },
    props: {
      label: "title",
      value: "id",
    },
    checkStrictly: true,
    rules: [
      {
        required: true,
        message: "请选择所属角色",
        trigger: "click",
      },
    ],
  },
  // {
  //   label: "所属部门",
  //   prop: "deptId",
  //   type: "tree",
  //   dicUrl: "/blade-system/dept/tree",
  //   minWidth: 80,
  //   multiple: true,
  //   props: {
  //     label: "title",
  //   },
  //   checkStrictly: true,
  //   rules: [
  //     {
  //       required: true,
  //       message: "请选择所属部门",
  //       trigger: "click",
  //     },
  //   ],
  // },
  {
    label: "用户编号",
    prop: "code",
    hide: true,
  },
  {
    label: "手机号码",
    prop: "phone",
    // copy: true,
    minWidth: 80,
    overHidden: true,
    rules: [
      {
        required: true,
        message: "请输入手机号",
        trigger: "click",
      },
    ],
  },
  {
    label: "电子邮箱",
    prop: "email",
    hide: true,
    overHidden: true,
  },
  {
    label: "用户性别",
    prop: "sex",
    type: "select",

    tag: true,
    colorDict: TagColorConfig.Sex,
    dicData: toolsfunc.generateDicData(SexEnumDict),
    // dicData: [
    //   {
    //     label: "男",
    //     value: 1,
    //   },
    //   {
    //     label: "女",
    //     value: 2,
    //   },
    //   {
    //     label: "未知",
    //     value: -1,
    //   },
    // ],
    // hide: true,
  },
  {
    label: "用户生日",
    type: "date",
    prop: "birthday",
    format: "yyyy-MM-dd hh:mm:ss",
    valueFormat: "yyyy-MM-dd hh:mm:ss",
    hide: true,
    addDisplay: false,
    editDisplay: false,
  },
  {
    addDisabled: true,
    label: "账号状态",
    prop: "statusName",
    hide: true,
    editDisplay: false,
  },
  {
    label: "登录限制",
    prop: "loginLimit",
    type: "select",
    minWidth: 90,
    dicData: [
      {
        label: "不限制",
        value: 0,
      },
      {
        label: "只允许手机号登录",
        value: 1,
      },
      {
        label: "只允许账号登录",
        value: 2,
      },
    ],
  },
];

// const column1 = [
//   { label: "日期", prop: "date", hide: true },
//   { label: "姓名", prop: "name", slot: true },
//   { label: "地址", prop: "address", slotHeader: true },
//   {
//     label: "combine",
//     children: [
//       { label: "t-h1", prop: "test", slotHeader: true },
//       { label: "t-h2", prop: "test2", slot: true },
//     ],
//   },
// ];

// const column = [
//   {
//     label: "通过率(%)",
//     prop: "passingRate",
//     minWidth: 90 + 24,
//     sortable: true,
//   },
//   {
//     label: "待收货订单",
//     prop: "waitReceive",
//     minWidth: 92,
//   },
//   {
//     label: "还款订单详情（逾期订单数 / 已还款订单数）",

//     children: [
//       {
//         prop: "firstOverdueOrders",
//         label: "第一期",
//         minWidth: 108,
//         children: [
//           {
//             label: "待收货订单",
//             prop: "waitReceive1",
//             minWidth: 92,
//           },
//           {
//             label: "待收货订单",
//             prop: "waitReceive2",
//             minWidth: 92,
//           },
//         ],
//         slot: true,
//       },
//       {
//         prop: "secondOverdueOrders",
//         label: "第二期",
//         minWidth: 108,
//         slot: true,
//       },
//       {
//         prop: "threeOverdueOrders",
//         label: "第三期",
//         minWidth: 108,
//         slot: true,
//       },
//       {
//         prop: "fourOverdueOrders",
//         label: "第四期",
//         minWidth: 108,
//         slot: true,
//       },

//       {
//         prop: "fiveOverdueOrders",
//         label: "第五期",
//         minWidth: 108,
//         slot: true,
//       },
//       {
//         prop: "sixOverdueOrders",
//         label: "第六期",
//         minWidth: 108,
//         slot: true,
//       },
//       {
//         prop: "overdueOrders",
//         label: "总数",
//         minWidth: 108,
//         slot: true,
//       },
//     ],
//   },
// ];
const option: TableOption = {
  // menuWidth: 280,
  addBtn: true,
  viewBtn: true,
  delBtn: true,
  editBtn: true,
  exportBtn: true,
  importBtn: true,

  index: true,
  selection: true,
  stripe: false,
  column,
  // searchBtnText: "查",
  // emptyBtnText: "清空",
  // saveBtnText: "提 交", // 弹窗保存
  // cancelBtnText: "关 闭", // 弹窗取消
  labelWidth: 80,
  addTitle: "用户",
};

const data = ref([
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    test: "No. ",
    test2: "t1",
  },
]);
// 这里使用reactive会有问题
// 当你使用 emit('update:modelValue', newValue) 时，实际上是在替换整个对象，而不是修改原有对象的属性
// formState = { name: 'John', age: 25 }; // reactive 对象被替换了 变成了非响应式
const formState = ref<Record<string, unknown>>({ t: 1 });
// const formState = reactive<Record<string, unknown>>({ t: 1 });

const onLoad = async (params: Api.GetSystemUserListParams) => {
  // console.log("----params: ", params);
  await sleep(1000);
  const [err, res] = await getUserList(params);
  if (err) return;
  // if (err) return ;
  return res;
};

// const onClick = (_row, _column, _cell) => {};

const handleSelectionChange = (_rows: Api.GetSystemUserListRes) => {
  // console.log("rows: ", rows);
};

const onRowSave = (form: Record<string, unknown>) => {
  console.log("add: ", form);
};
const onRowDel = (row: ApiRecord) => {
  console.log("del", row);
};
const onRowView = (row: ApiRecord) => {
  console.log("view", row);
};
const onRowUpdate = (form: Record<string, unknown>) => {
  console.log("update banner", form);
};
const onRowBatchDel = () => {
  console.log("batch");
};

watch(
  formState,
  (_newVal) => {
    console.log("father components: ", formState.value);
  },
  { deep: true }
);

const onBeforeOpen = async (done: () => void, _type: Custom.OperationType, loading: () => void) => {
  try {
    loading();
    await sleep(500);
  } catch (e) {
    console.error("before open: ", e);
  } finally {
    done();
  }
};
</script>
<template>
  <div class="main">
    <!-- <div class="z-99999">{{ formState }}<el-button @click="onClick">t</el-button></div> -->
    <ep-table
      ref="tableRef"
      v-model="formState"
      :data1="data"
      :option="option"
      :on-load="onLoad"
      :before-open="onBeforeOpen"
      @selection-change="handleSelectionChange"
      @row-save="onRowSave"
      @row-del="onRowDel"
      @row-view="onRowView"
      @row-update="onRowUpdate"
      @row-batch-del="onRowBatchDel"
    >
      <template #address-header>
        <div>add</div>
      </template>
      <template #name>
        <el-tag>123</el-tag>
      </template>
      <!-- <template #test2="scoped">
        <div>123 {{ scoped.row }}</div>
      </template> -->
      <template #test-header> <div>123</div></template>
      <!-- <template #menu-left>
        <el-button link type="primary">设置二审</el-button>
        <el-button link type="primary">设置二审1</el-button>
        <el-button link type="primary">设置二审2</el-button>
      </template> -->
    </ep-table>
  </div>
</template>
<style lang="scss" scoped>
.test {
  color: yellow;
  font-size: 20px;
}
</style>
